<template>
  <div class="app-container org-tab-info">
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <div>
        <el-tabs v-model="activeName" style="margin-top: -15px;">
          <el-tab-pane label="流程表单" name="first" style="margin-top:2px">
              <el-form ref="form" :model="filingForm"  label-width="100px">
                <el-row>
                   <el-col :span="8">
                    <el-form-item label="机构名称" prop="orgName" size="small">
                      <span  v-text="filingForm.orgName"></span>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="上级" prop="parentName" size="small">
                      <span>{{filingForm.parentName}}</span>
                    </el-form-item>
                  </el-col>


                  <!-- <el-col :span="8">
                    <el-form-item label="状态" prop="flowName" size="small">
                      <span v-text="this.selectDictLabel(this.orgStatusOptOptions,filingForm.orgStatusOpt)"></span>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="存在下级" prop="flowName" size="small">
                      <span v-text="this.selectDictLabel(this.hasChildOptOptions,filingForm.hasChildOpt)"></span>
                    </el-form-item>
                  </el-col> -->

                  <el-col :span="8">
                    <el-form-item label="名称" prop="flowName" size="small">
                      <span  v-text="filingForm.orgName"></span>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="编码" prop="flowName" size="small">
                      <span  v-text="filingForm.orgCode"></span>
                    </el-form-item>
                  </el-col>


                  <el-col :span="8">
                    <el-form-item label="创建年份" prop="flowName" size="small">
                      <span  v-text="filingForm.createYear"></span>
                    </el-form-item>
                  </el-col>

                  <el-col :span="14">
                    <el-form-item label="工作人员列表" prop="flowName" size="small">
                    </el-form-item>
                  </el-col>

                    <el-table v-loading="loading" :data="employeeList">
                      <el-table-column label="编号" align="center" prop="employeeId" />
                      <el-table-column label="工号" align="center" prop="employeeNo" />
                      <el-table-column label="姓名" align="center" prop="employeeName" />
                      <el-table-column label="任职起始日期" align="center" prop="hireStartDate" width="180">
                        <template slot-scope="scope">
                          <span>{{ parseTime(scope.row.hireStartDate, '{y}-{m}-{d}') }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="任职状态" align="center" prop="hireStatusOpt" :formatter="hireStatusOptFormat" />
                      <el-table-column label="任职批文号 " align="center" prop="approvalNo" width="200"/>
                    </el-table>

                    <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="filingQueryParams.pageNum"
                    :limit.sync="filingQueryParams.pageSize"
                    @pagination="getList"
                  />

                </el-row>
              </el-form>
            <div class="bottom_button">
              <el-button type="primary" @click="cancel">关闭</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="流程签批" name="third" style="margin-top:2px">
            <TaskApproval ref="task" :instanceId="filingForm.instanceId"></TaskApproval>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { commitDeclarationFiling, listDeclarationFiling, getDeclarationFiling,
    delDeclarationFiling, addDeclarationFiling, updateDeclarationFiling, exportDeclarationFiling } from "@/api/labdata/declarationFiling";
  import {listOrgnization,getOrgnization,delOrgnization,addOrgnization,
    updateOrgnization,exportOrgnization} from "@/api/labdata/orgnization";
  import { listEmployee, getEmployee, delEmployee, addEmployee, updateEmployee, exportEmployee } from "@/api/labdata/employee";
  import Treeselect from "@riophae/vue-treeselect";
  import TaskApproval from '@/views/labdata/flowTask/task_approval.vue'
  import { getOrgByFunctionOpt, listSecondOrgLab } from "@/api/labdata/orgnization";
  import { listOrgThird, getOrgThird, delOrgThird, addOrgThird, updateOrgThird, exportOrgThird } from "@/api/labdata/orgThird";
  import { listInstrumentation, getInstrumentation, delInstrumentation, addInstrumentation, updateInstrumentation, exportInstrumentation } from "@/api/labbase/instrumentation";


  export default {
    name: "DeclarationFilingDetail",
    props: {
    },
    components: {
      TaskApproval, Treeselect
    },
    data() {
      return {
        total:0,
        showCopy: false,
        filingForm:{

        },
        //二级机构
        secondOrgList: [],
        //二级机构下的实验室
        secondOrgLabList: [],
        // 实验室仪器列表
        instrumentationList: [],
        // 表格树数据
        deptList: [],
        // 项目类型字典
        labProjectOptOptions: [],
        title: '',
        // 遮罩层
        loading: true,
        // 是否显示弹出层
        open: false,
        flowName: "",
        activeName: 'first',
        //员工列表
        userList: [],
        //文件列表
        fileList: [],
        // 查询参数
        queryParams: {},
        // 工作人员查询参数
        filingQueryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {},
        host: process.env.VUE_APP_PROXY,
        detailData: {},
        // 任职状态字典
      hireStatusOptOptions: [],
      // 存在下级字典
      hasChildOptOptions: [],
      // 状态字典
      orgStatusOptOptions: [],
      // 机构属性字典，修改为基础数据表了
      orgFunctionOptOptions: [],
      // 实验室工作人员表格数据
      employeeList: [],
      // 机构id
      glabolOrgId: null,
      // 流程实例id
      glabolInstanceId: null,

      };
    },
    created() {
      // this.getUserInfo();
      this.getDeptList();
      this.getDicts("labProjectOpt").then(response => {
        this.labProjectOptOptions = response.data;
        getOrgByFunctionOpt(2).then(response => {
          this.secondOrgList = response.data;
        });
      });
      this.getDicts("hireStatusOpt").then(response => {
      this.hireStatusOptOptions = response.data;
    });
      this.getDicts("hasChildOpt").then(response => {
        this.hasChildOptOptions = response.data;
      });
      this.getDicts("sys_normal_disable").then(response => {
        this.orgStatusOptOptions = response.data;
      });
        this.getDicts("orgFunctionOpt").then(response => {
          this.orgFunctionOptOptions = response.data;
        });
    },
    methods: {
      /** 查询部门列表 */
      getDeptList() {
        this.loading = true;
        this.queryParams = {}
        listOrgnization(this.queryParams).then(response => {
          this.deptList = response.rows;
        });
      },
      handleUpdate(row) {
        this.glabolInstanceId = row.instanceId;
        let params = {};
        params.instanceId = row.instanceId
        // 查询组织机构基本信息
        listOrgnization(params).then(response => {
          this.filingForm = response.rows[0];
          this.glabolOrgId = response.rows[0].orgId;
          // 查询机构工作人员
          this.getList();
          this.filingForm.instanceId = this.glabolInstanceId;
          this.$emit("flowName", response.rows[0].flowName);
          this.open = true;
          this.title = "组织机构申报备案申请预览";
        });
        this.handleLabChange(row.collegeOrgId)
        this.refreshChoose(row.classRoomId)
        this.$forceUpdate();
      },
      // 查询用户信息
      // getUserInfo() {
      //   this.loading = true;
      //   listEmployee().then(response => {
      //     this.userList = response.rows;
      //   });
      // },
      // 项目类型字典翻译
      labProjectOptFormat(value) {
        return this.selectDictLabel(this.labProjectOptOptions, value);
      },

      // 所在部门字典翻译
      departmentOrgIdFormat(value) {
        var datas = this.deptList
        for (let key in datas) {
          if (datas[key].orgId == value) {
            return datas[key].orgName;
          }
        }
        return "";
      },
      // 项目负责人翻译
      projectOwnerIdFormat(value) {
        var datas = this.userList
        for (let key in datas) {
          if (datas[key].employeeNo == value) {
            return datas[key].employeeName;
          }
        }
        return "";
      },
      //附件展示
      handlePictureCardPreview(file) {
        window.location.href = file.url;
        this.dialogVisible = true;
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.form = {};
      },

      handleLabChange(item) {
        //console.log('change lab :'+item);
        if (item) {
          this.form.labId = null;
          listSecondOrgLab(item).then(response => {
            this.secondOrgLabList = response.data;
          });
        }
      },

      refreshChoose(item) {
        if (item) {
          let params = {
            labId: item
          };
          listInstrumentation(params).then(response => {
            this.instrumentationList = response.rows;
          });
        }
      },

      //学院匹配
      collegeFormat(value) {
        let datas = this.secondOrgList
        for (let key in datas) {
          if (datas[key].orgId == value) {
            return datas[key].orgName;
          }
        }
        return "";
      },

      // 实验室匹配
      classRoomIdFormat(value) {
        let datas = this.secondOrgLabList
        for (let key in datas) {
          if (datas[key].orgId == value) {
            return datas[key].orgName;
          }
        }
        return "";
      },

      // 实验室仪器匹配
      instrumentDeviceIdFormat(value) {
        let datas = this.instrumentationList
        for (let key in datas) {
          if (datas[key].assetNo == value) {
            return datas[key].name;
          }
        }
        return "";
      },

      /** 查询实验室工作人员列表 */
      getList() {
        this.loading = true;
        this.filingQueryParams.orgId = this.glabolOrgId;
        listEmployee(this.filingQueryParams).then(response => {
          this.employeeList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

       // 任职状态字典翻译
     hireStatusOptFormat(row, column) {
      return this.selectDictLabel(this.hireStatusOptOptions, row.hireStatusOpt);
    },


    },
  };
</script>

<style type="text/css" scoped>
  .bottom_button {
    width: 100%;
    text-align: right;
    margin-top: 10px;
  }

  .uploadCss .el-upload {
    display: none !important;
  }

  .form-item {
    margin-bottom: 2px;
  }

  .form_table {
    margin-bottom: 5px;
  }

  .item {
    margin-bottom: 2px;
  }
</style>
